<template>
	<view class="guide-info">
		<view class="guide-info_head">
			<view class="guide-info_head_info">
				<view class="guide-info_head_info_user">
					<view class="guide-info_head_info_user_name">
						覃海
					</view>
					<view class="guide-info_head_info_user_rule">
						已认证 <rui-icon icon="right"></rui-icon>
					</view>
				</view>
				<view class="guide-info_head_info_desc">
					夕阳圆梦师，实操过上百个老人团，擅长策划老人团出行。
				</view>
				<view class="guide-info_head_info_tag">
					<view class="guide-info_head_info_tag_item">
						夕阳圆梦人
					</view>
					<view class="guide-info_head_info_tag_item">
						老人游达人
					</view>
				</view>
			</view>
			<view class="guide-info_head_avatar">
				<image class="guide-info_head_avatar_img" src="/static/images/service.png" mode="heightFix"></image>
			</view>
		</view>

		<view class="guide-info_intro">
			<view class="guide-info_intro_item">
				<view class="guide-info_intro_item_value">
					新疆
				</view>
				<view class="guide-info_intro_item_desc">
					主营目的地
				</view>
			</view>
			<view class="guide-info_intro_item">
				<view class="guide-info_intro_item_value">
					17年
				</view>
				<view class="guide-info_intro_item_desc">
					旅游从业年限
				</view>
			</view>
			<view class="guide-info_intro_item">
				<view class="guide-info_intro_item_value">
					369人
				</view>
				<view class="guide-info_intro_item_desc">
					90天出游人数
				</view>
			</view>
		</view>
		<view class="guide-info_line"></view>
		<view class="guide-info_quotation">
			<view class="guide-info_quotation_info">
				<view class="guide-info_quotation_info_title">
					全面打卡疆内景点
				</view>
				<view class="guide-info_quotation_info_li">
					打卡旅行中每个亮点
				</view>
				<view class="guide-info_quotation_info_li">
					了解新疆的历史文化
				</view>
			</view>
			<view class="guide-info_quotation_tag">
				<view class="guide-info_quotation_tag_name">
					经验丰富
				</view>
				<!-- <view class="guide-info_quotation_score">4.8</view> -->
				<view class="guide-info_quotation_tag_desc">
					—区域师傅级标杆—
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.guide-info {
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;


		&_quotation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;


			&_tag {
				&_name {
					font-size: 45rpx;
					color: var(--color);
					font-weight: bold;
				}

				&_desc {
					color: #999;
					font-size: 22rpx;
				}
			}

			&_info {
				&_title {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				&_li {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;

					&::before {
						content: "·";
					}
				}
			}

		}

		&_line {
			height: 2rpx;
			width: 100%;
			background: linear-gradient(to right, #fff, #eee, #fff);
		}

		&_intro {
			display: flex;
			justify-content: space-between;
			padding: 40rpx;

			&_item {
				&_value {
					font-size: 38rpx;
					font-weight: bold;
				}

				&_desc {
					color: #999;
					font-size: 24rpx;
				}
			}
		}

		&_head {
			background-image: radial-gradient(circle, #fff, #fff, #d6fbff);
			// margin: 5rpx;
			position: relative;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;

			&_info {
				width: calc(100% - 280rpx);
				padding: 30rpx;
				position: relative;
				z-index: 2;

				&_tag {
					display: flex;

					&_item {
						background: #d9faff;
						color: var(--color);
						font-size: 24rpx;
						padding: 4rpx 20rpx;
						border-radius: 30rpx;
						margin-right: 10rpx;
					}
				}

				&_desc {
					margin: 20rpx 0;
				}

				&_user {
					display: flex;
					align-items: center;

					&_name {
						font-weight: bold;
						font-size: 38rpx;
					}

					&_rule {
						background: #d9faff;
						color: var(--color);
						font-size: 24rpx;
						padding: 4rpx 20rpx;
						border-radius: 30rpx;
						margin-left: 15rpx;
					}
				}
			}

			&_avatar {
				height: 315rpx;
				position: absolute;
				top: -50rpx;
				right: 0;

				&_img {
					height: inherit;
				}
			}
		}
	}
</style>